<template>
<div class="person">
  <div class="user">
    <el-card shadow="always" class="user-info-card">
      <span>用户信息</span>
      <el-divider/>
      <div>
        <div style="text-align: center;margin: 10px">{{userInfoData.account}}-{{userInfoData.name}}</div>
        <div style="text-align: center;margin: 10px">注册时间：<span class="fa fa-clock-o"></span>{{userInfoData.createTime}}</div>
      </div>
      <el-divider/>
      <div class="personal-relation">
        <div class="relation-item">手机号：<div style="float: right; padding-right:30px;">{{userInfoData.phone}}</div></div>
        <div class="relation-item">性别：<div style="float: right; padding-right:30px;">{{userInfoData.sex===1?'男':'女'}}</div></div>
        <div class="relation-item">身份证号：<div style="float: right; padding-right:30px;">{{userInfoData.idNumber}}</div></div>
      </div>
    </el-card>
    <el-card shadow="always" class="user-info-update">
      <span>基本信息维护</span>
      <el-divider/>
      <el-form label-width="100px" :model="userUpdateData" ref="updateUserFrom" :rules="userUpdateRules">
        <el-form-item label="用户昵称" prop="name"><el-input size="small" v-model="userUpdateData.name"></el-input></el-form-item>
        <el-form-item label="用户手机号" prop="phone"><el-input size="small" v-model="userUpdateData.phone"></el-input></el-form-item>
        <el-form-item label="身份证号" prop="idNumber"><el-input size="small" v-model="userUpdateData.idNumber"></el-input></el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="commitUpdateUser">提交</el-button>
          <el-button type="warning" size="medium" @click="resetUserUpdate">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
  <div class="expert" v-if="expertInfoData.id">
    <el-card shadow="always" class="expert-info">
      <span>专家信息</span>
      <el-divider/>
        <div style="text-align: center;margin-left: 10px">
          <div style="padding: 5px">姓名:{{expertInfoData.expertName}}</div>
          <div style="padding: 5px">性别：{{ expertInfoData.expertSex===1?'男':'女' }}</div>
          <div style="padding: 5px">身份证号:{{expertInfoData.expertIdNumber}}</div>
          <div style="padding: 5px">专家分类:{{expertInfoData.expertCategoryName}}</div>
      </div>
      <el-divider/>
      <div class="personal-relation">
        <div class="relation-item">邮箱：<div style="float: right; padding-right:20px;">{{expertInfoData.expertEmail}}</div></div>
        <div class="relation-item">手机号：<div style="float: right; padding-right:30px;">{{expertInfoData.expertPhone}}</div></div>
        <div class="relation-item">学历：<div style="float: right; padding-right:30px;">{{expertInfoData.expertEducation}}</div></div>
        <div class="relation-item">专业：<div style="float: right; padding-right:30px;">{{expertInfoData.expertMajor}}</div></div>
        <div class="relation-item">职称：<div style="float: right; padding-right:30px;">{{expertInfoData.expertTitle}}</div></div>
        <div class="relation-item">单位：<div style="float: right; padding-right:30px;">{{expertInfoData.expertUnit}}</div></div>
        <div class="relation-item">所在地区：<div style="float: right; padding-right:30px;">{{expertInfoData.expertRegion}}</div></div>
      </div>
    </el-card>
    <el-card shadow="always" class="expert-update">
      <span>专家信息维护</span>
      <el-divider/>
      <el-form label-width="100px" :model="expertUpdateData" ref="updateExpertFrom" :rules="expertUpdateRules">
        <el-form-item label="专家邮箱" prop="expertEmail"><el-input size="small" v-model="expertUpdateData.expertEmail"></el-input></el-form-item>
        <el-form-item label="手机号" prop="expertPhone"><el-input size="small" v-model="expertUpdateData.expertPhone"></el-input></el-form-item>
        <el-form-item label="专家学历" prop="expertEducation"><el-input size="small" v-model="expertUpdateData.expertEducation"></el-input></el-form-item>
        <el-form-item label="专家专业" prop="expertMajor"><el-input size="small" v-model="expertUpdateData.expertMajor"></el-input></el-form-item>
        <el-form-item label="专家职称" prop="expertTitle"><el-select size="small" v-model="expertUpdateData.expertTitle">
          <el-option v-for="item in titleOptions" :key="item.id" :value="item.titleName" :label="item.titleName">{{item.titleName}}</el-option>
        </el-select></el-form-item>
        <el-form-item label="专家单位" prop="expertUnit"><el-input size="small" v-model="expertUpdateData.expertUnit"></el-input></el-form-item>
        <el-form-item label="所在地区" prop="expertRegion"><el-input size="small" v-model="expertUpdateData.expertRegion"></el-input></el-form-item>
        <el-form-item>
          <el-button type="primary" size="medium" @click="commitUpdateExpert">提交</el-button>
          <el-button type="warning" size="medium" @click="resetExpertUpdate()">清空</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</div>
</template>


<script>
import { GetUserInfoApi, UpdateUserApi } from '@/request/user/user-api'
import { selectByUserId, updateExpertInfoApi } from '@/request/expert/expert-api'
import { GetAllTitleApi } from '@/request/title/title-api'
import { validateAddUserIdNumber, validateAddUserPhone } from '@/utils/validate/add-user-validate'

export default {
  created () {
    this.initUserInfo()
    this.initExpertInfo()
    this.initTitleOption()
  },
  data(){
    return{
      userUpdateData:{},
      userInfoData:{},
      expertInfoData:{},
      expertUpdateData:{},
      titleOptions:[],
      userUpdateRules:{
        name:{required:true,message:'昵称不能为空',trigger:'blur'},
        phone:[{required:true,message:'手机号不能为空',trigger:'blur'},{
          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
          message: "请输入正确的手机号码",
          trigger: "blur"
        }],
        idNumber:[{required:true,message:'身份证不能为空',trigger:'blur'}, {
          validator: validateAddUserIdNumber,
          trigger: 'blur'
        }],
      },
      expertUpdateRules:{
        expertPhone: [{
          required: true,
          message: '请输入联系方式',
          trigger: 'blur'
        }, {
          validator: validateAddUserPhone,
          trigger: 'blur'
        }],
        expertEmail: [{
          required: true,
          message: '请输入邮箱',
          trigger: 'blur'
        }, {
          type: 'email',
          message: '请输入正确的邮箱',
          trigger: 'blur'
        }],
        expertEducation: {
          required: true,
          message: '请输入最高学历',
          trigger: 'blur'
        },
        expertMajor: {
          required: true,
          message: '请输入专业',
          trigger: 'blur'
        },
        expertTitle: {
          required: true,
          message: '请输入专家职称',
          trigger: 'blur'
        },
        expertRegion: {
          required: true,
          message: '请输入所在地',
          trigger: 'blur'
        },
        expertUnit: {
          required: true,
          message: '请输入工作单位',
          trigger: 'blur'
        },
      }
    }
  },methods:{
    async initTitleOption () {
      let res = await GetAllTitleApi()
      if (res&&res.data===200){
        this.titleOptions=res.data
      }
    },
    resetUserUpdate(){
      this.userUpdateData.name=null
      this.userUpdateData.phone=null
      this.userUpdateData.idNumber=null
    },
    resetExpertUpdate(){
      this.expertUpdateData={
        id:this.expertInfoData.id,
        expertEmail:null,
        expertPhone:null,
        expertEducation:null,
        expertMajor:null,
        expertUnit:null,
        expertRegion:null,
        expertTitle:null
      }
    },
    commitUpdateUser(){
      this.$refs.updateUserFrom.validate(valid => {
        if (!valid) {
          this.$message.error('存在错误内容，请完善信息！')
          return false
        } else {
          this.$confirm('确定修改基本信息吗？', '提示',
              {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
              }).then(async () => {
            let res = await UpdateUserApi(this.userUpdateData)
            if (res&&res.code===200){
              await this.initUserInfo()
              this.$message.success("修改成功")
            }else {
              this.$message.error("修改失败")
            }
          }).catch(()=>{

          });
        }
      });
    },
    commitUpdateExpert(){
      this.$refs.updateExpertFrom.validate(valid => {
        if (!valid) {
          this.$message.error('存在错误内容，请完善信息！')
          return false
        } else {
          this.$confirm('确定修改专家基本信息吗？', '提示',
              {
                'confirmButtonText': '确定',
                'cancelButtonText': '取消',
                'type': 'warning'
              }).then(async () => {
            let res = await updateExpertInfoApi(this.expertUpdateData)
            if (res&&res.code===200){
              await this.initExpertInfo()
              this.$message.success("修改成功")
            }else {
              this.$message.error("修改失败")
            }
          }).catch(()=>{

          });
        }
      });
    },
    async initUserInfo () {
     let account= JSON.parse(localStorage.getItem("expert-userInfo")).account
      let res = await GetUserInfoApi(account)
      if (res&&res.code===200){
        this.userInfoData=res.data
        this.userUpdateData={
          id:res.data.id,
          name:res.data.name,
          phone:res.data.phone,
          idNumber:res.data.idNumber
        }
      }else {
        this.$message.error("初始化用户信息失败")
      }
    },
    async initExpertInfo () {
      let account= JSON.parse(localStorage.getItem("expert-userInfo")).id
      let res =await selectByUserId(account)
      if (res&&res.code===200){
        this.expertInfoData=res.data
        this.expertUpdateData={
          id:res.data.id,
          expertEmail:res.data.expertEmail,
          expertPhone:res.data.expertPhone,
          expertEducation:res.data.expertEducation,
          expertMajor:res.data.expertMajor,
          expertUnit:res.data.expertUnit,
          expertRegion:res.data.expertRegion,
          expertTitle:res.data.expertTitle
        }
      }else {
        this.$message.error("初始化专家信息失败")
      }
    }
  }
}
</script>
<style scoped lang="less">
.person{
  font-size: 14px;
  .user{
    display: flex;
    width: 70%;

    margin:20px  auto;
    .user-info-card{
      width: 35%;
      border-radius: 10px;
      margin-right: 20px;
    }
    .user-info-update{
      width: 60%;
      border-radius: 10px;
    }
  }
  .expert{
    display: flex;
    width: 70%;
    margin:20px  auto;
    .expert-info{
      width: 35%;
      border-radius: 10px;
      margin-right: 20px;
    }
    .expert-update{
      width: 60%;
      border-radius: 10px;
    }
  }
}
.relation-item {
  padding: 10px;
}
</style>
